<template>
    <div>
        <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
        <my-button-frame>
            <div class="d-inline-block">
                <my-download-btn></my-download-btn>
            </div>

            <div class="d-inline-block ml-1">
                <my-delete-btn @delete-success="getCategoryList()"></my-delete-btn>
            </div>

            <div class="d-inline-block ml-1">
                <my-rename-btn @rename-success="getCategoryList()"></my-rename-btn>
            </div>

            <div class="d-inline-block float-right" style="width: 445px">
                <v-text-field
                        v-model="search"
                        hide-details
                        outlined
                        :label="searchLabel"
                        dense
                        class="mr-8"
                        clearable
                        append-icon="mdi-magnify"
                        @click:append=""
                >
                </v-text-field>
            </div>
        </my-button-frame>
        <my-info-bar :length="categoryList.length" :type="type"></my-info-bar>
        <my-data-table :list="categoryList" :search="search"></my-data-table>
    </div>
</template>

<script>
    import MyButtonFrame from "../common/MyButtonFrame";
    import MyDownloadBtn from "../common/MyDownloadBtn";
    import MyDeleteBtn from "../common/MyDeleteBtn";
    import MyRenameBtn from "../common/MyRenameBtn";
    import MyNoResultsText from "../common/MyNoResultsText";
    import MyListSpace from "../common/MyListSpace";
    import MyInfoBar from "../common/MyInfoBar";
    import MyDataTable from "../common/MyDataTable";
    import MyLoadingOverlay from "../common/MyLoadingOverlay";
    export default {
        name: "Sort",
        components: {
            MyLoadingOverlay,
            MyDataTable,
            MyInfoBar,
            MyListSpace,
            MyNoResultsText,
            MyRenameBtn,
            MyDeleteBtn,
            MyButtonFrame,
            MyDownloadBtn},
        created() {
            this.getCategoryList();
        },
        beforeDestroy() {
            // 离开时更新selected
            this.$store.commit("setSelected", [])
        },
        data() {
            return {
                categoryList: [],
                search: '',
                loadingOverlay: false
            }
        },
        methods: {
            getCategoryList() {
                // 获取文件列表
                let _this = this;
                _this.loadingOverlay = true;
                // 初始化selected
                _this.$store.commit("setSelected", []);
                _this._get({
                    url: 'system/disk/get-category-list',
                    params: {
                        type: _this.type
                    }
                }).then(rsp => {
                    _this.categoryList = rsp.data;
                }).catch(error => {
                    console.log(error)
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            }
        },
        computed: {
            searchLabel() {
                switch (this.type) {
                    case 'audio':
                        return '搜索音频';
                    case 'video':
                        return '搜索视频';
                    case 'other':
                        return '搜索其它';
                }
            },
            type() {
                return this.$route.query.type;
            },
            selected: {
                get() {
                    return this.$store.state.selected;
                },
                set(value) {
                    this.$store.commit('setSelected', value)
                }
            }
        },
        watch: {
            $route: function () {
                // 路由变化时清空搜索栏
                this.search = ''
                // 重新获取文件
                this.getCategoryList();
            }
        }
    }
</script>

<style scoped>

</style>